<%--
  Created by IntelliJ IDEA.
  User: 31401
  Date: 2024/6/25
  Time: 12:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品详情</title>
    <script type="text/javascript" src="js/jquery-3.7.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            padding-bottom: 100px; /* 根据 footer 的高度调整 */
            position: relative; /* 添加相对定位 */
        }
        .banner {
            display: flex; /* 使用Flexbox布局 */
            justify-content: space-between; /* 左右两个区域间隔开 */
            align-items: flex-start; /* 垂直对齐方式 */
        }

        .left-banner {
            flex: 1; /* 左侧区域占据1份空间 */
            padding: 10px; /* 内边距 */
        }

        .left-banner img {
            width: 100%; /* 图片宽度适应容器 */
            border-radius: 10px; /* 圆角边框 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
        }

        .right-banner {
            flex: 2; /* 右侧区域占据2份空间 */

            padding: 10px;
            background: #f9f9f9; /* 轻微的背景颜色 */
            border-radius: 10px; /* 圆角边框 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
            margin-left: 20px; /* 与左侧区域保持一定间隔 */
        }

        .right-banner h2 {
            margin-top: 0; /* 标题不留顶部边距 */
            color: #333; /* 字体颜色 */
        }
        .right-banner .details {
            display: block; /* 改为块级元素，垂直排列 */
        }

        .right-banner .details .detail-item {
            margin-bottom: 10px; /* 每个详情项之间增加底部边距 */
        }

        .right-banner .details .detail-item dt {
            font-weight: bold; /* 加粗标题 */
            margin-right: 10px; /* 标题和输入框之间的间隔 */
        }

        .right-banner .details .detail-item dd {
            margin: 0; /* 清除dd的默认边距 */
            background-color: gainsboro;
            border-radius: 5px;
            width: 250px;
        }

        .right-banner .action {
            margin-top: 20px; /* 操作区域与详情区域之间的间隔 */
        }

        .right-banner .action input[type="text"] {
            margin-right: 5px; /* 输入框和按钮之间的间隔，如果需要 */
            width: 100px; /* 根据需要调整输入框宽度 */
        }

        /* 确保.action中的a标签是块级或内联块级元素，以便良好展示 */
        .right-banner .action a {
            display: inline-block; /* 使链接表现为块级元素 */
            padding: 10px 20px; /* 按钮内边距 */
            background: #007bff; /* 按钮背景色 */
            color: white; /* 按钮文字颜色 */
            border-radius: 5px; /* 按钮圆角 */
            text-decoration: none; /* 去除下划线 */
            transition: background-color 0.3s; /* 背景色变化动画 */
        }

        .right-banner .action a:hover {
            background: #0056b3; /* 鼠标悬浮时的背景色 */
        }
    </style>
</head>
<body>
<jsp:include page="indexHeader.jsp"></jsp:include>
<div class="banner">
    <div class="left-banner">
        <img src=".${goods.detailImg1}" alt="${goods.goodsName}" width="500px" height="500px">
    </div>
    <div class="right-banner">
        <h2>${goodsName}</h2>
        <dl class="details">
            <div class="detail-item">
                <dt>名称</dt>
                <dd>${goods.goodsName}</dd>
            </div>
            <div class="detail-item">
                <dt>价格</dt>
                <dd>${goods.goodsPrice}元</dd>
            </div>
            <div class="detail-item">
                <dt>仅剩</dt>
                <dd id="goodsStock">${goods.goodsStock}个</dd>
            </div>
            <!-- 添加购买数量项 -->
            <div class="detail-item">
                <dt>购买数量</dt>
                <dd>
                    <input type="text" id="goodsnum" name="goodsNum" onblur="checkstock(${goods.goodsId})" placeholder="数量" style="width: 130px;">
                    <label id="checkstock" ></label>
                </dd>
            </div>
        </dl>
        <div class="action">
            <a href="javascript:" onclick="addcart(${goods.goodsId})">加入购物车</a>
            <label id="addcart"></label>
        </div>
    </div>
</div>
<script>
    function checkstock(goodsId) {
        var goodsid = goodsId;
        var addnum = $("#goodsnum").val();
        $.post("checkgoodsStock", {goodsId: goodsid, addnum: addnum}, function (res) {
            console.log(res);
            if (res.code == 200) {
                $("#checkstock").replaceWith("<lable id='checkstock' style='color:dimgrey'>库存充足!</label>")
            } else {
                $("#checkstock").replaceWith("<lable id='checkstock' style='color:#007bff'>库存不足！</label>")
            }
        }, "json")
    }
    function addcart(goodsId) {
        var goodsid = goodsId;
        var addnum = $("#goodsnum").val();
        $.post("addGoodsCartServlet", {goodsid: goodsid, addnum: addnum}, function (addn) {
            console.log(addn)
            if (addn.code == 201) {
                $("#addcart").replaceWith("<lable id='addcart' style='color:dimgrey;margin-left: 5px'>已加入购物车！</lable>")
            } else {
                $("#addcart").replaceWith("<lable id='addcart' style='color:#007bff'>库存不足,加入购物车失败！</label>")
            }
        }, "json")
    }
</script>
<jsp:include page="indexFooter.jsp"></jsp:include>
</body>
</html>
